import React, { memo, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import MusicThemeHeaderRcm from '@/components/theme-header-rcm';
import MusicTopRanking from '@/components/top-ranking';

import { getTopListAction } from '../../store/actionCreators';

import { RankingWrapper } from './style';


export default memo(function MusicRecommendRanking() {

    const { upRanking, newRanking, originRanking } = useSelector(state => ({
        upRanking: state.getIn(['recommend', 'upRanking']),
        newRanking: state.getIn(['recommend', 'newRanking']),
        originRanking: state.getIn(['recommend', 'originRanking']),
    }), shallowEqual);

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getTopListAction(0));
        dispatch(getTopListAction(2));
        dispatch(getTopListAction(3));
    }, [dispatch]);

    return (
        <RankingWrapper>
            <MusicThemeHeaderRcm title="榜单"/>
            <div className="tops">
                <MusicTopRanking info={upRanking} />
                <MusicTopRanking info={newRanking} />
                <MusicTopRanking info={originRanking} />
            </div>
        </RankingWrapper>
    );
})